<template>

    <div>
        <m-table :columns="columns" ref="tableRef" :title="$route.meta.title" :formSearch="formState" :pagination="false"
            :api="getDepartmentList">
            <template #search>
                <a-form-item label="组织" name="organization_id">
                    <m-form-organize-lists v-model="formState.organization_id" />
                </a-form-item>
            </template>
            <template #button>
                <a-button type="primary" size="small" @click="handleEdit('add')" v-perms="['/adminapi/organize.department/save']">
                    <icon name="ant-icon-PlusOutlined" />
                </a-button>
            </template>

            <template #action="{ record }">
                <a-button type="link" size="small" @click="handleEdit('edit', record)" v-perms="['/adminapi/organize.department/update']">
                    <icon name="ant-icon-EditOutlined" />
                </a-button>
                <a-popconfirm :title="`是否确认删除 【${record.title}】 部门？ \n 其下所有职位也将一并删除`" @confirm="handleDelete(record.id)">
                    <a-button type="danger" size="small" v-perms="['/adminapi/organize.department/delete']">
                        <icon name="ant-icon-DeleteOutlined" />
                    </a-button>
                </a-popconfirm>
            </template>
        </m-table>
        <edit-popup ref="editPopupRef" @success="() => tableRef?.run()" />
    </div>

</template>
<script setup lang="ts">
import type { UnwrapRef } from 'vue';

import { getDepartmentList , deleteDepartment } from '@/api/system/organize/department'
import editPopup from './components/edit.vue'
const editPopupRef = ref<InstanceType<typeof editPopup>>()
const tableRef = ref()

interface FormState {
    organization_id: string | number
}
const formState: UnwrapRef<FormState> = reactive({
    organization_id: '',
})
const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        width: 100,
        align: 'center',
    }, {
        title: '部门名称',
        dataIndex: 'title',
    }, {
        title: '组织',
        dataIndex: 'organization_id_name',
        width: 240,
    }, {
        title: '负责人',
        dataIndex: 'leader_id_name',
        width: 140,
    }, {
        title: '创建者',
        dataIndex: 'creator_id_name',
        width: 140,
    }, {
        title: '创建时间',
        dataIndex: 'create_time',
        width: 240,
    }, {
        title: '更新时间',
        dataIndex: 'update_time',
        width: 240,
    }, {
        title: '操作',
        dataIndex: 'action',
    }
]

const handleEdit = (mode: 'add' | 'edit', record?: any) => {
    editPopupRef.value?.open(mode, record)
}

const handleDelete = async (id: any) => {
    await deleteDepartment(id)
    tableRef.value?.run()
}
</script>